<template>
  <div class="movie">
    <Head title="电影" ></Head>
    <div class="swipe-box">
        <p class="choosecity" v-if="city" @click="choosecity">
          <span>{{city.name}}</span>
          <van-icon name="arrow-down" />
        </p>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(l,i) in banners" :key="i">
                <img class="m-img" :src="l.poster" alt="">
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="m-box">
        <van-tabs v-model="type" sticky >
          <van-tab title="正在热映" name="1">
              <mlist :list="films" :loadmore="loadmore" :refreshdata="refreshdata" ></mlist>
          </van-tab>
          <van-tab title="即将上映" name="2">
            <mlist :list="films" :loadmore="loadmore"  :refreshdata="refreshdata"></mlist>
          </van-tab>
        </van-tabs>      
    </div>
  </div>
</template>


<script>
export default {
  name:"movie",
  data(){
    return {
        banners:[],
        films:[],
        pageNum:1,
        pageSize:10,
        type: 1,    // 类型  1 正在热映  2 即将上映
        total:0
    }
  },
  watch:{
    type(v){
        this.pageNum = 1;
        this.$http.getmaizuo({
          cityId: this.city.cityId,   // 城市ID  定位
          pageNum: this.pageNum,    // 页码
          pageSize: this.pageSize,   // 每页的条数
          type: v,    // 类型  1 正在热映  2 即将上映
          k: 7397698,   
        },{
          'X-Host': 'mall.film-ticket.film.list'
        })
        .then(res=>{
            this.films = res.data.films;
            this.banners = res.data.films.slice(0,4);
            this.total = res.data.total; 
        })
    }
  },
  methods:{
    refreshdata(callback){
        this.films = this.films.reverse(); // 翻转数据
        callback()
    },
    loadmore(nodatacb,adddatacb){
      this.pageNum++;
      if(this.pageNum> Math.ceil(this.total / this.pageSize )){
          //数据已经见底了
          nodatacb()
      }else{
          this.$http.getmaizuo({
            cityId: this.city.cityId,   // 城市ID  定位
            pageNum: this.pageNum,    // 页码
            pageSize: this.pageSize,   // 每页的条数
            type: this.type,    // 类型  1 正在热映  2 即将上映
            k: 7397698,   
          },{
            'X-Host': 'mall.film-ticket.film.list'
          })
          .then(res=>{
              this.films = this.films.concat(res.data.films)
              this.total = res.data.total; 
              adddatacb()
          })
      } 
    },
    choosecity(){
      this.$router.push({name:'city',query:{name:this.city.name}})
    }
  },
  created(){
  },
  activated(){
    console.log("activated 激活 ")
  },
  mounted(){
    // 先要判断是否已经定位选择城市
    if(this.city){
        this.$http.getmaizuo({
          cityId: this.city.cityId,   // 城市ID  定位
          pageNum: this.pageNum,    // 页码
          pageSize: this.pageSize,   // 每页的条数
          type: this.type,    // 类型  1 正在热映  2 即将上映
          k: 7397698,   
        },{
          'X-Host': 'mall.film-ticket.film.list'
        })
        .then(res=>{
            this.films = res.data.films;
            this.banners = res.data.films.slice(0,4);
            this.total = res.data.total; 
        })
    }else{
      this.$dialog.alert({
          title: '友情提示',
          message: '你没有选择城市,请去定位选择',
          theme: 'round-button',
        }).then(() => {
          // on close
          this.$router.push({name:'city'})
        });
    }
    
  }
}
</script>


<style lang="scss" >
.swipe-box{
  width:100%;
  height:195px;
  position: relative;
  .my-swipem , .m-img{
      width:100%;
      height:195px;
  }
  .choosecity{
    position: absolute;
    top:10px;
    left:10px;
    width:auto;
    min-width: 60px;
    padding:0 10px;
    height:30px;
    border-radius: 20px;
    background: rgba(0,0,0,0.29);
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:100;
    span{
      margin-right:5px;
    }
  }
}

.movie{
  .m-box{
      .van-tabs__line {
          background-color:#f50
        }
      .van-tab--active{
        .van-tab__text{
            color:#f50;
          }
      }
  }
}

.van-sticky{
  z-index:1000001;
}
  
</style>
